<template>
    <div @click="clicked">
      <slot name="header">123</slot>
      <slot :a = "title"></slot>
      <slot name="footer">123</slot>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
      return {
          title: 'this is a'
      }
  },
  methods:{
      clicked () {
          this.$emit('changeTitle','clicked from A')
      }
  }
}
</script>

<style lang="stylus" scoped>
  *{
    text-align: center;
  }
</style>
